<template>
  <div class="danxuan">
    <!-- 学科 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*学科:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-select v-model="single.danSubject" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <p v-if="single1 && !single.danSubject">请输入学科</p>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 题干 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*题干:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input
            v-model="single.danName"
            placeholder="请输入内容"
            @focus="dialogVisible = true"
          ></el-input>
          <el-dialog :visible.sync="dialogVisible" width="60%" class="qed">
            <div class="boxs">
              <el-upload
                class="avatar-uploader"
                name="file"
                action=""
                :show-file-list="false"
              >
              </el-upload>
              <quill-editor v-model="content" :options="editorOption">
              </quill-editor>
              <!-- 富文本内容 -->
              <span>
                <el-button type="primary" @click="save()">确 定</el-button>
              </span>
            </div>
          </el-dialog>
          <p v-if="single1 && !single.danName">请输入题干</p>
        </div>
      </el-col>
    </el-row>
    <!-- 选项 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*选项:</div>
      </el-col>
      <el-col :span="20">
        <div v-for="(v, i) in form.options" :key="i">
          <el-row>
            <el-col :span="1" class="sel">
              <div>&emsp;{{ form.options[i].code }}</div>
            </el-col>
            <el-col :span="1">
              <div>
                <el-input v-model="form.options[i].code"></el-input>
              </div>
            </el-col>
            <el-col :span="10">
              <div>
                <el-input v-model="text[i]" placeholder="请输入内容"></el-input>
              </div>
            </el-col>
            <el-col :span="4">
              <div>
                <el-button type="danger" @click="del(i)">删除</el-button>
              </div>
            </el-col>
            <el-col :span="4">
              <div></div>
            </el-col>
            <el-col :span="4">
              <div></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 标答 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*标答:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-row>
            <el-col :span="3" v-for="(v, q) in form.options" :key="q">
              <div>
                <el-radio v-model="radio" :label="q">{{
                  form.options[q].code
                }}</el-radio>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <!-- 解析 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content bg-purple">*解析:</div>
      </el-col>
      <el-col :span="20">
        <div>
          <el-input
            v-model="single.danDesc"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <p v-show="single1 && !single.danDesc">请输入解析</p>
      </el-col>
    </el-row>
    <!-- 分数 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*分数:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-input-number
            v-model="single.danScore"
            @change="handleChange"
            :min="1"
            :max="10"
          ></el-input-number>
        </div>
        <p v-if="!single.danScore">请输入分数</p>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 难度 -->
    <el-row>
      <el-col :span="2">
        <div class="grid-content">*难度:</div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-rate v-model="single.danDifficult"></el-rate>
        </div>
      </el-col>
      <el-col :span="16">
        <div></div>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <div class="but">
      <el-button type="primapreviewry" @click="see()">提交</el-button>
      <el-button @click="reset()">重置</el-button>
      <el-button type="success" @click="addQuestion">添加选项</el-button>
      <el-button type="success" @click="preview()">预览</el-button>
      <el-dialog
        title="题目"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <p>{{ single.danName }}</p>
        <span class="da" v-for="(v, i) in text" :key="form.options[i].code">{{
          form.options[i].code + text[i]
        }}</span>
      </el-dialog>
    </div>
  </div>
</template>
  
<script>
import { quillEditor } from "vue-quill-editor";
import { toolbarOptions } from "@/utils/editor";
import { demo } from "@/mixin/shimengtong/index.js";
import { singlelink } from "@/apis/shimengtong/Index";
export default {
  mixins: [demo],
  data() {
    return {
      //富文本框
      content: "", // 内容
      // content: null,
      editorOption: {
        placeholder: "请输入文章内容",
        modules: {
          toolbar: {
            container: toolbarOptions,
          },
        },
      },
      i: 0,
      form: {
        // 选项
        options: [
          {
            // 选中的A B C D
            code: "A",
            // input中输入的每个选项
            title: "",
            // 布尔值true或false，选的哪个选项，哪个选项就为true
            isRight: false,
          },
          {
            code: "B",
            title: "",
            isRight: false,
          },
          {
            code: "C",
            title: "",
            isRight: false,
          },
          {
            code: "D",
            title: "",
            isRight: false,
          },
        ],
      },
      single: {
        danSubject: "", //学科
        danName: "", //题干
        danDesc: "", //解析
        danDifficult: 0, //难度
        danScore: 0, //分数
      },
      text: {}, //选项
      single1: false,
      dialogVisible: false,
    };
  },
  methods: {
    //富文本框按钮
    save() {
      (this.single.danName = this.delTag(this.content)),
        (this.dialogVisible = false);
    },
    //移除HTML标签
    delTag(str) {
      return str.replace(/<[^>]+>/g, "");
    },

    handleChange(danSubject) {
      console.log(danSubject);
    },
    // //逆向传值
    // aaaaa(val) {
    //   console.log(val);
    //   this.single.danName = val
    // },
    //非空验证
    see() {
      if (!this.single.danName) {
        this.danName1 = true;
      }
      if (!this.single.danSubject) {
        this.danSubject1 = true;
      }
      if (!this.single.danDesc) {
        this.danDesc1 = true;
      }
      //新增单选
      singlelink(this.single, this.text).then((ok) => {
        console.log(ok);
        this.$message({
          message: "新增单选成功！",
          type: "success",
        });
      });
    },
    //删除对应项
    del(i) {
      console.log(i);
      this.form.options.splice(i, 1);
    },
    // 随机顺序生成ABCDE...字母的函数
    setDesc() {
      const letterArr = [];
      // 字母A的code值是65，但因为已经到字母D了，所以直接从69E开始循环
      for (let i = 69; i < 91; i++) {
        letterArr[i] = String.fromCharCode(i);
      }
      return letterArr;
    },
    // 增加选项和答案按钮
    addQuestion() {
      // 调用随机顺序生成ABCDE...字母的函数，可以打印randomAbc 数组看下
      // 有69个元素是空的，所以直接进行了截取
      const randomAbc = this.setDesc().splice(69);
      const res = [
        ...this.form.options,
        {
          code: randomAbc[this.i],
          title: "",
          isRight: false,
        },
      ];
      this.i++;
      this.form.options = res;
    },
  },
  components: {
    quillEditor,
  },
};
</script>
  
<style scoped>
.danxuan {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding-top: 20px;
  font-weight: 600;
}

.grid-content {
  text-align: center;
  line-height: 40px;
}

.el-row {
  margin-top: 10px;
}

.el-col {
  margin-right: 10px;
}

.sel {
  text-align: center;
  line-height: 40px;
  margin-left: 50px;
}

.el-rate {
  margin-top: 10px;
}

.but {
  /* margin: 10px,5px,0,20px; */
  margin-top: 30px;
  margin-left: 120px;
}

p {
  height: 20px;
  font-size: 15px;
}

/* 不要删 */
.qed >>> .ql-blank {
  height: 300px;
}
.da {
  margin: 10px;
}
</style>
  